<template>
  <div id="mapChartContainer"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
import { mapData } from "@/request/product";
import china from "@/views/echartsPage/map/china.json";
echarts.registerMap("china", china);
let mapChart = null;

const createMap = (data) => {
  let _sortData = data.sort((a, b) => b.value - a.value);
  _sortData = _sortData.map((item) => ([...item.position, item.value, item.name]));
  let top5Data = _sortData.slice(0, 5);
  let top5MarkPoint = top5Data.map((item, index) => ({
    name: item[3],
    coord: [item[0], item[1]],
    value: index + 1
  }))
  let mapChartContainer = document.getElementById("mapChartContainer");
  mapChart = echarts.init(mapChartContainer);
  let options = {
    geo: {
      emphasis: {
        disabled: true
      },
      map: "china",
      roam: true,
      top: "30%",
      scaleLimit: {
        min: 1.5,
        max: 10,
      },
      itemStyle: {
        areaColor: "#016BB5",
      },
    },
    series: [
      {
        type: "scatter",
        coordinateSystem: "geo",
        data: _sortData,
        symbolSize: (value) => {
          return value[2] / 20
        },
        itemStyle: {
          color: "RGBA(165, 202, 63, .7)",
        },
      },
      {
        type: "effectScatter",
        coordinateSystem: "geo",
        data: top5Data,
        markPoint: {
          symbol: 'pin',
          symbolSize: 100,
          itemStyle: {
            color: 'red',
          },
          label: {
            fontSize: 36
          },
          data: top5MarkPoint
        },
        symbolSize: 40,
        itemStyle: {
          color: "#fff",
        },
      },
    ],
  };
  mapChart.setOption(options);
};
onMounted(async () => {
  let {
    data: { data: mapChartData },
  } = await mapData();
  createMap(mapChartData);
});

onUnmounted(() => {
  mapChart.dispose(mapChart);
  mapChart = null;
});
</script>

<style lang="less" scoped>
#mapChartContainer {
  width: 100%;
  height: 878px;
}
</style>
